<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <title>OCR投递功能说明</title>
    <style>
      body{
        margin: 0;
      }
      html,body{
        width: 100%;
        height: 100%;
      }
      h2,h3,h4,p{
        margin: 0;
        padding: 0;
        font-weight: normal;
      }
      ul,li{
        list-style: none;
        padding: 0;
        margin: 0;
      }
      img{
        display: block;
        width: 6.7rem;
        margin: 0 auto;
        box-shadow: 0.03rem 0.03rem 0.05rem rgba(0,0,0,.4);
      }
      h2{
        position: relative;
        font-size: 0.36rem;
        line-height: 0.58rem;
        padding-bottom: 0.4rem;
        margin-bottom: 0.4rem;
      }
      h2:after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        width: 80%;
        height: 0.04rem;
        background-color: #f3f3f3;
      }
      h3{
        font-size: 0.32rem;
        padding-bottom: 0.2rem;
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
        border-bottom: 0.02rem solid salmon;
      }
      h4{
        position: relative;
        font-size: 0.3rem;
        padding: 0.2rem;
        border: 0.01rem solid #f3f3f3;
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
      }
      .wrapper{
        background-color: #fff;
        padding: 0.3rem 0.2rem;
      }
      .txt-wrapper{
        position: relative;
        padding: 0.16rem;
        border: 0.01rem solid #f3f3f3;
      }
      .txt-wrapper:after, h4:after{
        content: '';
        position: absolute;
        bottom: -0.05rem;
        left: 5%;
        width: 90%;
        height: 0.05rem;
        background-color: #faf4f4af;
      }
      .txt-wrapper > p{
        font-size: 0.3rem;
        text-indent: 0.6rem;
        line-height: 0.46rem;
      }
      .explain-wrapper{
        font-size: 0.3rem;
        padding: 0.3rem 0.2rem;
        background-color: rgba(255, 127, 52, 0.966);
      }
      .explain-wrapper > p{
        text-indent: 0.6rem;
        line-height: 0.46rem;
        color: #fff;
      }
      .tip{
        display: inline-block;
        position: relative;
        width: 0.14rme;
        height: 0.76rem;
        font-size: 0.32rem;
        line-height: 0.76rem;
        padding-left: 0.16rem;
        padding-right: 0.2rem;
        color: #fff;
        background-color: rgba(255, 127, 52, 0.966);
      }
      .tip:after{
        content:'';
        position: absolute;
        right: -0.76rem;
        top: 0;
        /* width: 0.1rem;
        height: 0.1rem; */
        border: 0.38rem solid rgba(255, 127, 52, 0.966);
        border-color: transparent transparent transparent rgba(255, 127, 52, 0.966);
      }
    </style>
    <script>
      //designWidth:设计稿的实际宽度值，需要根据实际设置
      //maxWidth:制作稿的最大宽度值，需要根据实际设置
      //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
      (function(designWidth, maxWidth) {
        var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;
        //浏览器竖屏与横屏转换的BUG。
        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            maxWidth = maxWidth || 540;
            width>maxWidth && (width=maxWidth);
            var rem = width * 100 / designWidth;
            remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
        }
    
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(remStyle);
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(remStyle);
            doc.write(wrap.innerHTML);
            wrap = null;
        }
        //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
        refreshRem();
    
        win.addEventListener("resize", function() {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
        }, false);
    
        win.addEventListener("pageshow", function(e) {
            if (e.persisted) { // 浏览器后退的时候重新计算
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
    
        if (doc.readyState === "complete") {
            doc.body.style.fontSize = "16px";
        } else {
            doc.addEventListener("DOMContentLoaded", function(e) {
                doc.body.style.fontSize = "16px";
            }, false);
        }
      })(750, 750);
    </script>
  </head>
  <body>
    <div class="wrapper">
      <h2>快递员小程序OCR版本功能说明</h2>
      <h3>一、目的</h3>
      <div class="txt-wrapper">
        <p>该功能采用OCR识别技术，可对包裹上面单内容进行识别。快递人员在派件作业时，对面单进行拍照，系统会自动识别面单上的运单条码和收件人手机号码。</p>
        <p>该功能的使用减少了录入手机号的繁琐，改善了快递员的派件体验，同时，提升了手机号码录入的效率。</p>
      </div>
      <h3>二、操作方式</h3>
      <p class="tip">投递环节</p>
      <h4>1.点击【投递】进入投递页面</h4>
      <img src="image/ocr-guidev2-1.png" />
      <h4>2-4.选择付款方和所属快递公司，点击【拍照图标】，进入拍照页面，采集面单照片</h4>
      <img src="image/ocr-guidev2-2.png" />
      <h4>5.选择格口类型</h4>
      <img src="image/ocr-guidev2-5.png" />
      <h4>6.点击【开箱】按钮，箱门开，放入包裹</h4>
      <img src="image/ocr-guidev2-6.png" />
      <h4>7.确认信息，点击【完成】投递</h4>
      <img src="image/ocr-guidev2-7.png" />
      <h4>8.可以取消投递，也可继续投下一件</h4>
      <img src="image/ocr-guidev2-8.png" />
      <p class="tip" style="margin-top: 0.2rem;">确认环节</p>
      <h4>9.包裹投入格口之后，进入首页点击【投递确认】进入确认页面</h4>
      <img src="image/ocr-guidev2-9.png" />
      <h4>10.在【待校验】中，需核对系统给出运单号和手机号与面单上的号码是否一致，如无误点击【确定投递】完成投递全部流程，系统给用户发送取件信息，同时，也可以对运单号和手机号进行修改</h4>
      <img src="image/ocr-guidev2-10.png" />
      <h4>11.在【已校验】中，可查看当天的投递信息</h4>
      <img src="image/ocr-guidev2-11.png" />
      <h3>三、说明</h3>
      <div class="explain-wrapper">
        <p>在个人中心，可以在普通模式和OCR模式之间进行切换。进入【个人中心】点击【OCR识别功能】来实现。</p>
        <p>快递员小程序OCR投递的件必须在小程序OCR模式下处理完成，不可在快递员app和小程序传统投递模式下处理。</p>
      </div>
    </div>
  </body>
</html>
